<template>
  <div>
    <el-button @click="locale = 'zh'">中文</el-button>
    <el-button @click="locale = 'en'">English</el-button>
    <div>
      {{ t('sayHi') }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 步骤一 当前语言设定
      locale: 'en',
      // 步骤二 字典文字材料
      message: {
        zh: {
          sayHi: '科三考了七次，手雷拌饭'
        },
        en: {
          sayHi: 'Seven times in class three, hand grenade bibimbap'
        }
      }
    }
  },
  methods: {
    // 步骤三 翻译功能
    t(str) {
      // 用户点击的是哪一个翻译
      const dict = this.message[this.locale]
      // 根据用户点击翻译的功能，进行翻译并渲染到页面中
      const res = dict[str]
      return res
    }
  }
}
</script>

<style>

</style>
